<template>
    <div class="baseHeader">
        <x-header :left-options="{backText: backText,showBack:showBack,preventGoBack:preventGoBack}" @on-click-back="left">
        {{title}}
        <a slot="right" v-on:click="right" class="rightTxt">{{rightTxt}}</a>
        </x-header>
    </div>
</template>

<script>
import { XHeader} from 'vux'
export default {
    props :{
        title :{type : String },
        backText : {type : String},
        showBack : {type : String},
        preventGoBack : {type : String},
        rightTxt : {type : String},
        back:{
            type: Function,
        },
        rightClick:{
            type: Function,
        },
    },
    components: {
        XHeader,
    },
    data () {
        return {
        }
    },
    methods:{
        left(){
            this.back();
        },
        right(){
            this.rightClick();
        },
    }
}
</script>
<style>
.baseHeader{width:100%;position:absolute;left:0;top:0;z-index:100;}
.baseHeader .vux-header{background-color:#fff; width: 100%;}
.baseHeader .vux-header .vux-header-title {color: #1f1c1c; }
.baseHeader .rightTxt{font-size: 16px !important;color: #695f5f !important;}
</style>